<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>task006</title>
</head>
<style type="text/css">
	.all {
		width: 980px;
		height: 1386px;
		margin: 0 auto;
		background-color:#ffffff;
	}

	.top {
		width: 892px;
		height: 61px;
		margin: 0 auto;
		border-bottom: 2px solid #938e8c;
	}

	.rectangle {
		width: 110px;
		height: 31px;
		font-family: "黑体";
		font-size: 12px;
		color: #ffffff;
		text-align: center;
		padding-top: 30px;
		background-color: rgb(213, 93, 92);
	}

	.middle-high {
		width: 892px;
		height: 370px;
		margin: 0 auto;
	}

	.mid-pic {
		width: 641px;
		height: 301px;
		margin: 35px 0;
		float: left;
	}

	.mid-text {
		width: 200px;
		height: 301px;
		margin: 35px 0;
		float: right;
		border-top: 2px solid #cc8091;
	}

	.text-num1 {
		text-decoration: underline;
		font-family: "Microsoft YaHei";
		font-size: 24px;
	}

	.text-num2 {
		font-family: 楷体;
		font-size: 12px;
		color: #676767;
		margin: 10px;
	}

	.text-num3 {
		text-decoration: underline;
		font-family: "Microsoft YaHei";
		font-size: 116px;
		color: #75b86b;
		font-style: italic;
		margin: -25px;
	}

	.text-num4 {
		font-family: "Microsoft YaHei";
		font-size: 55px;
		color: #cc8091;
		float: left;
		margin: -1px;
	}

	.text-num5 {
		font-family: "Microsoft YaHei";
		font-size: 21px;
		color: #cc8091;
	}

	.text-num6 {
		font-family: "Microsoft YaHei";
		font-size: 12px;
		color: #cc8091;
		margin-top: -25px;
	}

	.middle-low {
		width: 892px;
		height: 200px;
		margin: 0 auto;
	}

	.what {
		width: 230px;
		height: 180px;
	}

	.when {
		width: 230px;
		height: 180px;
		margin-left: 260px;
		margin-top: -195px;
	}

	.how {
		width: 230px;
		height: 180px;
		margin-left: 520px;
		margin-top: -195px;
	}

	.whtext {
		text-decoration: underline;
		font-size: 16px;
		font-weight: bold;
	}

	.qianduan {
		font-size: 12px;
		font-family: "Microsoft YaHei";
		color: #231815;
		padding: 16px 0;
		opacity: 0.7;
	}

	.percent {
		font-size: 12px;
		font-style: italic;
		font-family: "Microsoft YaHei";
		color: #cd4a48;
		padding: 16px 0;
		opacity: 0.7;
		margin-left: 60px;
		margin-top: -95px;
	}

	.qianduan {
		font-size: 12px;
		font-family: "Microsoft YaHei";
		color: #231815;
		padding: 16px 0;
		opacity: 0.7;
	}

	.bottom-left {
		width: 415px;
		height: 650px;
		margin-left: 50px;
		float: left;
	}

	.text-num7 {
		font-size: 42px;
		color: #11456b;
		padding: 16px 0;
		margin: 0
	}

	.text-num8 {
		font-family: 黑体;
		font-size: 72px;
		color: #f5e327;
		font-style: italic;
		font-weight: bold;
		margin: 0;
	}

	.left-bottom {
		width: 415px;
		height: 460px;
		border-top: 2px solid #000000;
	}

	.text-num9 {
		font-family: "Microsoft YaHei";
		font-size: 70px;
		color: #f5e327;
		margin: 0;
	}

	.text-num10 {
		font-family: 宋体;
		font-size: 12px;
		color: #767777;
	}

	.picture01 {
		width: 168px;
		height: 289px;
		margin: -340px 0 0 245px
	}

	.bottom-right {
		width: 460px;
		height: 650px;
		float: right;
		margin-right: 45px;
	}

	.picture02 {
		width: 460px;
		height: 260px;
	}

	.rightbottom {
		width: 460px;
		height: 318px;
		margin-top: 30px;
		background-color: rgb(238, 238, 214);
	}

	.text-num11 {
		font-family: 宋体;
		font-size: 16px;
		color: #5a5b5b;
		text-align: left;
		line-height: 20px;
	}

	.text-num12 {
		font-size: 12px;
		text-align: right;
		font-style: italic;
	}

	.number {
		width: 260px;
		height: 160px;
		margin-top: 25px;
		background-color: rgb(213, 93, 92);
	}

	.num01 {
		width: 70px;
		height: 86px;
		color: #ffffff;
		font-size: 110px;
		font-family: "Microsoft YaHei";
		border-right: 2px solid #ffffff;
	}

	.num02 {
		color: #ffffff;
		font-size: 21px;
		line-height: 24px;
		font-family: 黑体;
		font-style: italic;
		margin-left: 75px;
		margin-top: -50px;
	}

	.num03 {
		color: #ffffff;
		font-size: 12px;
		line-height: 6px;
		font-family: 黑体;
		margin-left: 75px;
		margin-top: -5px;
	}

	.hello {
		width: 240px;
		float: right;
		margin-right: -55px;
		margin-top: -145px;
	}

	.num04,
	.num05 {
		position: relative;
		display: block;
		width: 0;
		height: 0;
		margin: auto;
		font-family: "黑体";
		font-size: 72px;
		color: #D55D5C;
	}

	.num04 {
		left: -155px;
		top: -13px;
	}

	.num05 {
		left: -30px;
		top: -29px;
	}

	.world {
		padding-right: 76px;
		color: #5a5b5b;
		font-size: 14px;
		font-family: 黑体;
		line-height: 16px;
		font-style: italic;
	}

	.world>i:first-child {
		padding-top: 5px;
		padding-right: 43px;
	}

	.world>i:last-child {
		padding-top: 5px;
		padding-right: 43px;
	}
	.segment{
		width:892px;
		height:40px;
		margin:650px 0 0 45px;
		border-bottom: 1px solid #938e8c;
	}
</style>
<body>
<div style="background-color:#5d5d5d;">
    <div class="all">
        <div class="top">
            <div class="rectangle">
                <p>ife.baidu.com</p>
            </div>
        </div>
        <div class="middle-high">
            <div class="mid-pic" style="background:url(../resource/picture/lsshunli.jpg);"></div>
            <div class="mid-text">
                <p class="text-num1">About
                    <br />TECHNOLOGE</p>
                <P class="text-num2">about technologe about technologe about technologe</P>
                <p class="text-num3">700</p>
                <p class="text-num4">3.2</p>
                <p class="text-num5">css</p>
                <p class="text-num6">scscscsccscscscsc</p>
            </div>
        </div>
        <div class="middle-low">
            <div class="what">
                <p class="whtext" style="color:#75b86b;">what</p>
                <p class="qianduan">
                    前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                </p>
            </div>
            <div class="when">
                <p class="whtext" style="color:#d2994f;">when</p>
                <p class="qianduan">
                    前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                </p>
            </div>
            <div class="how">
                <p class="whtext" style="color:#cc7680;">how</p>
                <p class="qianduan">
                    前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                    <br />
                    <br /> what------
                    <br /> what------
                    <br /> what------
                    <br />
                    <p class="percent"> 40%
                        <br/>30%
                        <br/>30%
                        <br/>
                    </p>
                </p>
            </div>
        </div>
        <div class="bottom-left">
            <span class="text-num7"><span class="text-num8">THE</span> TECHNOLOGE OF FRONT
            <br /><span style="font-size:33px">前端技术领域</span></span>
            <div class="left-bottom">
                <span class="text-num9">前</span>
                <p class="text-num10" style="margin-left:72px;margin-top:-65px;">
                    端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                </p>
                <p class="text-num10" style="margin-top:-5px;">
                    前端前端前端前端前端前端前端前端前端
                    <br />前端前端前端前端前端前端前端前端前端
                    <br /> 前端前端前端前端前端前端前端前端前端
                    <br />前端前端前端前端前端前端前端前端前端
                    <br /> 前端前端前端前端前端前端前端前端前端
                    <br />前端前端前端前端前端前端前端前端前端
                    <br /> 前端前端前端前端前端前端前端前端前端
                    <br />前端前端前端前端前端前端前端前端前端
                    <br /> 前端前端前端前端前端
                    <br /> &nbsp;&nbsp;前端前端前端前端前端前端前端
                    <br />前端前端前端前端前端前端前端前端前端
                    <br /> 前端前端前端前端前端前端前端前端前端
                    <br />前端前端前端前端前端前端前端前端前端
                    <br /> 前端前端前端前端前端前端前端前端前端
                    <br />前端前端前端前端前端前端前端前端前端
                    <br /> 前端前端前端前端前端前端前端前端前端
                    <br />前端前端前端前端前端前端前端前端前端
                    <br /> 前端前端前端前端前端前端前端前端前端
                    <br />前端前端前端前端前端前端前端前端前端
                    <br /> 前端前端前端前端前端前端前端前端前端
                    <br />前端前端前端前端前端前端前端前端前端
                    <br /> 前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端
                </p>
                <div class="picture01"><img src="../resource/picture/task601.png" /></div>
            </div>
        </div>
        <div class="bottom-right">
            <div class="picture02"><img src="../resource/picture/task602.jpg" /></div>
            <div class="rightbottom">
                <br />
                <p class="text-num11">&nbsp;▲&nbsp;前端前端前端前端前端前端前端前端...........<span class="text-num12">前端</span></p>
                <p class="text-num11">&nbsp;▲&nbsp;前端前端前端前端前端前端...................<span class="text-num12">前端</span></p>
                <p class="text-num11">&nbsp;▲&nbsp;前端前端前端前端前端前端前端前端前端......<span class="text-num12">前端</span></p>
                <div class="number">
                    <div class="num01">0</div>
                    <p class="num02">ONE TWO
                        <br /> THREE FOUR FIVE</p>
                    <p class="num03">hello world hello world
                        <br /> hello world</p>
                </div>
                <div class="hello">
                    <span class="num04">“</span>
                    <span class="world"> <i></i> world hello world
                        <br />hello world hello world
                        <br />hello world hello world
                        <br />hello world hello world
                        <br />hello world hello world
                        <br />hello world<i></i>
                        </span>
                    <span class="num05">”</span>
                </div>
            </div>
        </div>
		<div class="segment"></div>
    </div>
</div>
</body>
</html>
